<template>
    <view class="savepadding">
        <view class="wrap">
            <view class="header">
                <view class="title">签约客户信息</view>
            </view>
            <view class="list">
                <view class="label">客户类型</view>
                <view class="value">{{detail.customerType|customerType}}</view>
            </view>
            <view class="list">
                <view class="label">客户姓名</view>
                <view class="value">{{detail.customerName|filterNull}}</view>
            </view>
            <view class="list">
                <view class="label">身份证号码</view>
                <view class="value">{{detail.idCardNo|filterNull}}</view>
            </view>
            <view class="list">
                <view class="label">联系电话</view>
                <view class="value">{{detail.contactMobile|filterNull}}</view>
            </view>
        </view>
        <view class="wrap">
            <view class="header">
                <view class="title">签约订单信息</view>
                <view class="title">{{detail.orderStatus|orderStatus}}</view>
            </view>
            <view class="list">
                <view class="label">所属业务员</view>
                <view class="value">{{detail.createUserName|filterNull}}</view>
            </view>
            <view class="list">
                <view class="label">签约号</view>
                <view class="value">{{detail.orderNo|filterNull}}</view>
            </view>
            <view class="list">
                <view class="label">签约业务类型</view>
                <view class="value">{{detail.businessType|filterNull}}</view>
            </view>
            <view class="list">
                <view class="label">申请签约时间</view>
                <view class="value">{{detail.createTime|filterNull}}</view>
            </view>
            <view class="list">
                <view class="label">签约完成时间</view>
                <view class="value">{{detail.createTime|filterNull}}</view>
            </view>
            <view class="list">
                <view class="label">签约扣款金额/元</view>
                <view class="value">¥{{detail.totalFee|filterNull}}/元</view>
            </view>
            <view class="list">
                <view class="label">签约状态</view>
                <view class="value">{{detail.orderStatus|orderStatus}}</view>
            </view>
            <view class="list">
                <view class="label">分期类型</view>
                <view class="value">{{detail.decutionType|filterNull}}</view>
            </view>
            <view class="list">
                <view class="label">扣款期数</view>
                <view class="value">{{detail.decutionNum|filterNull}}/期</view>
            </view>
            <view class="list">
                <view class="label">扣款模式</view>
                <view class="value">{{detail.decutionPattern|filterNull}}</view>
            </view>
            <view class="list">
                <view class="label">扣款间隔</view>
                <view class="value">{{detail.decutionInterval|filterNull}}</view>
            </view>
            <view class="list">
                <view class="label">首期扣款日期</view>
                <view class="value">{{detail.firstDecutionTime|filterNull}}</view>
            </view>
        </view>
        <view class="wrap">
            <view class="header">
                <view class="title">分期明细*</view>
            </view>
            <view class="table">
                <view class="table-h">
                    <view>分期数</view>
                    <view>扣款日期</view>
                    <view>扣款金额</view>
                </view>
                <template v-for="item in detail.billList">
                    <view class="table-b"
                          :key="item.stage">
                        <view>第{{item.stage}}期</view>
                        <view>{{item.expectDecutionTime}}</view>
                        <view>¥{{item.expectDecutionFee}}</view>
                    </view>
                </template>
            </view>
        </view>
        <view class="wrap">
            <view class="header">
                <view class="title">扣款订单信息</view>
            </view>
            <view class="list">
                <view class="label">扣款单号</view>
                <view class="value">{{detail.billNo|filterNull}}</view>
            </view>
            <view class="list">
                <view class="label">扣款期数</view>
                <!-- <view class="value">1/10期</view> -->
                <view class="value">{{detail.stageStr|filterNull}}期</view>
            </view>
            <view class="list">
                <view class="label">预计扣款时间</view>
                <view class="value">{{detail.expectDecutionTime|filterNull}}</view>
            </view>
            <view class="list"
                  v-if="detail.actualDecutionTime">
                <view class="label">实际扣款时间</view>
                <view class="value">{{detail.actualDecutionTime|filterNull}}</view>
            </view>
            <view class="list"
                  v-if="detail.applyDecutionFee">
                <view class="label">申请扣款金额/元</view>
                <view class="value">¥{{detail.applyDecutionFee|filterNull}}/元</view>
            </view>
            <view class="list">
                <view class="label">实际扣款金额/元</view>
                <view class="value">¥{{detail.actualDecutionFee|filterNull}}/元</view>
            </view>
            <view class="list">
                <view class="label">剩余扣款金额/元</view>
                <view class="value">¥{{detail.remainFee|filterNull}}元</view>
            </view>
            <view class="list">
                <view class="label">扣款方式</view>
                <view class="value">{{detail.billDecutionType|billDecutionType}}</view>
            </view>
            <view class="list tip">
                <view class="label">扣款状态</view>
                <view class="value">{{detail.decutionStatus|decutionStatus}}</view>
            </view>
        </view>
        <view class="button-b"
              v-if="Number(detail.remainFee)"
              @click="onclickoukuan">手动发起扣款</view>
        <u-modal :show="showkoukuan"
                 title="手动发起扣款"
                 showCancelButton
                 @cancel="oncancelkoukuan"
                 @confirm="onconfirmkoukuan">
            <view>
                <view class="list">剩余扣款金额：¥{{detail.remainFee|filterNull}}/元</view>
                <view class="list">申请扣款金额：
                    <view style="width:100upx">
                        <u--input class="input"
                                  type="number"
                                  border="none"
                                  fontSize="24upx"
                                  placeholder="请输入"
                                  v-model="amount"></u--input>
                    </view>
                    /元
                </view>
                <view class="tip">最低输入扣款金额0元</view>
            </view>
        </u-modal>

        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
import * as orderApi from '@/api/order-api'
import shoudongkoukuan from '@/pagesA/mixins/shoudongkoukuan'

export default {
    mixins: [shoudongkoukuan],
    data() {
        return {
            current: 1,
            showkoukuan: false,
            signOrderBillId: 0, // 扣款订单id
            amount: '', // amount
            detail: {
                // "customerType": "客户类型；1企业2个人",
                // "customerName": "客户名称",
                // "idCardNo": "身份证号",
                // "contactMobile": "联系电话",
                // "orderStatus": "签约状态 1签约成功 2已解约",
                // "createUserName": "所属业务员",
                // "orderNo": "签约号",
                // "businessType": "签约业务类型",
                // "createTime": "申请签约时间,签约完成时间",
                // "totalFee": "签约扣款金额/元",
                // "decutionType": "分期类型",
                // "decutionNum": "扣款期数",
                // "decutionPattern": "扣款模式",
                // "decutionInterval": "扣款间隔",
                // "firstDecutionTime": "首期扣款日期",
                // "customerId": "客户id",
                // "billList": [
                //     {
                //         "stage": "期数",
                //         "expectDecutionTime": "扣款时间",
                //         "expectDecutionFee": "扣款金额"
                //     }
                // ],
                // "billNo": "扣款单号",
                // "stageStr": "扣款单号",
                // "expectDecutionTime": "预计扣款时间",
                // "actualDecutionTime": "实际扣款时间",
                // "applyDecutionFee": "申请扣款金额/元",
                // "billDecutionType": "扣款方式",
                // "actualDecutionFee": "实际扣款金额/元",
                // "remainFee": "剩余扣款金额/元",
                // "decutionStatus": "扣款状态1扣款成功 2扣款失败 3部分成功 4扣款中 5已解约",
                // "failReason": "最新扣款失败原因",
                // "signOrderBillId": "扣款订单id",
                // "signOrderId": "签约订单id"
            },
        }
    },
    computed: {
        userInfo() {
            return this.$store.state.user.userInfo || {};
        },
    },
    onLoad(op) {
        this.signOrderBillId = op.signOrderBillId; // 扣款订单id
    },
    async mounted() {
        this.getDetail();
    },
    methods: {
        async getDetail() {
            try {
                const result = await orderApi.signOrderBillInfo({
                    signOrderBillId: this.signOrderBillId, // 扣款订单id
                });
                this.detail = result.data || {};
            } catch (error) {
                const title = error?.msg || error?.message || error || '网络错误';
                uni.showToast({ title, icon: 'error' });
            }
        },
        sectionChange(index) {
            this.current = index;
        },
        onclickoukuan() {
            this.amount = this.detail.remainFee
            this.showkoukuan = true;
        },
        oncancelkoukuan() {
            this.showkoukuan = false;
        },
        /**
         * 手动发起扣款
         */
        async onconfirmkoukuan() {
            if (!Number(this.amount) || this.amount > this.detail.remainFee) {
                uni.showToast({
                    title: '扣款金额输入错误！',
                    icon: 'error',
                })
                return;
            }
            await this.shoudongkoukuan({
                customerId: this.detail.customerId, // "客户id",
                signOrderBillId: this.signOrderBillId, // "扣款订单id",
                amount: this.amount, // "扣款金额"
            });
            // try {
            //     const result = await orderApi.deduction({
            //         "customerId": this.detail.customerId, // "客户id",
            //         "signOrderBillId": this.signOrderBillId, // "扣款订单id",
            //         "amount": this.amount, // "扣款金额"
            //     });
            //     if (result.code == 200) {
            //         this.showkoukuan = false;
            //         return;
            //     }
            //     throw new Error(result.msg);
            // } catch (error) {
            //     const title = error?.msg || error?.message || error || '网络错误';
            //     uni.showToast({ title, icon: 'error' });
            // }
        },
    }
}
</script>

<style lang="scss" scoped src="@/styles/mmv.scss"></style>